import { Component, OnInit, ViewChild } from '@angular/core';
import { ColumnType, SPage, TablePageComponent } from '@shared/components/table-page/table-page.component';
import { AreaService, TreeNodeItem } from '../area.service';
import { ApiService } from '@core/services/api';
import { NzFormatEmitEvent, NzTreeNodeOptions } from 'ng-zorro-antd';

@Component({
  selector: 'app-area-list',
  templateUrl: './area-list.component.html',
  styles: []
})
export class AreaListComponent implements OnInit {
  @ViewChild('st', {static: false})st: TablePageComponent;
  config: SPage = {
    columns: [
      {
        index: 'id',
        title: '行政区划编号',
        filter: {
          type: 'string'
        }
      },
      {
        index: 'cityName',
        title: '行政区划名称',
        filter: {
          type: 'string'
        }
      },
      {
        index: 'cityShortName',
        title: '简称',
        filter: {
          type: 'string'
        }
      },
      {
        index: 'cityZipcode',
        title: '邮政编码',
      },
      /*{
        index: 'type',
        title: '类型',
        filter: {
          type: 'select',
          items: [
            {label: '省', value: '1'},
            {label: '市', value: '2'}
          ]
        }
      },*/
      {
        index: 'status',
        title: '状态',
        type: ColumnType.tag,
        tag: {
          false: {text:'停用', color: 'red'},
          true: {text:'启用', color: 'green'},
          3: { text: '进行中', color: 'blue' },
          4: { text: '默认', color: '' },
          5: { text: '警告', color: 'orange' },
        },
        filter: {
          type: 'select',
          hideSearch: true,
          items: [
            {label: '启用', value: true},
            {label: '停用', value: false},
          ]
        }
      },
     /* {
        index: 'status',
        title: '数据状态',
        type: ColumnType.tag,
        tag: {
          true: {text: '有效', color: 'green'},
          false: {text: '无效', color: 'red'},
        },
        filter: {
          type: 'select',
          items: [
            {label: '有效', value: true},
            {label: '无效', value: false},
          ]
        }
      },*/
    ],
    reqUrl: this.api.city.page.url
  };
  searchValue = '';
  nodes: Array<any>;
  nzEvent(event: NzFormatEmitEvent): void {
    // load child async
    if (event.eventName === 'expand') {
      const node = event.node;
      if (node && node.getChildren().length === 0 && node.isExpanded) {
        console.log(event)
        this.loadNode(event.node).then(data => {
          console.log(node.level)
          if(node.level == 2) {
            data.forEach( item => {
              item.isLeaf = true;
            })
          }
          node.addChildren(data);
        }, () => {
          node.addChildren([])
        });
      }
    }
  }

  loadNode(data): Promise <any>{
    return this.area.getAreaTreeNode(data.key)
  }
  selectChage(event): void {
    this.st.searchData({cityParentId: event.keys[0]});
  }
  constructor(
    private area: AreaService,
    private api: ApiService,
  ) { }

  ngOnInit() {
    this.area.getAreaTreeNode(0).then(res => {
        this.nodes = res;
        console.log(this.nodes)
    })
  }

}
